<template>
    <div class="process-container">
        <div class="process-content">
            <div class="process-content-item" v-for="item in processList" :key="item.id">
                <div>
                    <div class="item-box">
                        <div v-if="item.state === 0" class="box-class item-box-default">
                            {{ item.handlerName }}
                        </div>
                        <div v-else-if="item.category === 0" class="box-class item-box-default">
                            {{ item.name }}
                        </div>
                        <div v-else-if="item.category === 1" class="box-class item-box-selectd">
                            {{ item.handlerName }}
                        </div>
                        <div
                            v-else-if="item.handler == ''"
                            class="box-class item-box-select"
                            @click="chooseProcessEmployee(item)"
                        >
                            选
                        </div>
                        <div v-else class="box-class item-box-selectd" @click="chooseProcessEmployee(item)">
                            {{ item.handlerName }}
                        </div>
                    </div>
                    <div class="item-label">{{ item.name }}</div>
                </div>
            </div>
        </div>
        <el-dialog
            width="800px"
            top="10vh"
            title="项目"
            v-model="showFlowHandlerGridCpt"
            :lock-scroll="true"
            :close-on-click-modal="false"
            :destroy-on-close="true"
        >
            <div class="dialog-content">
                <FlowHandlerGridCpt :single="true" :data="params" @select="employeeSelect"></FlowHandlerGridCpt>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import http from '@/http.js'
import FlowHandlerGridCpt from './FlowHandlerGridCpt.vue'

const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    taskId: {
        type: String,
        default: ''
    },
    flowType: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['select'])

const processList = ref([])

const params = ref(null)

const showFlowHandlerGridCpt = ref(false)

defineExpose({
    processList
})

const initData = () => {
    if (props.flowType === '') {
        return
    }
    if (props.taskId === '') {
        loadInitFlow()
    } else {
        loadTaskFlow()
    }
}

const loadInitFlow = () => {
    http.fetchForm({
        url: '/flow/queryFlowByTypeCode',
        method: 'get',
        data: {
            typeCode: props.flowType
        }
    }).then((res) => {
        let list = res.data
        for (let i = 0; i < list.length; i++) {
            if (list[i].state === 0) {
                list[i].handler = localStorage.getItem('username')
                list[i].handlerName = localStorage.getItem('employeeName')
                break
            }
        }
        processList.value = list
    })
}

const loadTaskFlow = () => {
    http.fetchForm({
        url: '/flow/task/queryTaskFlow',
        method: 'get',
        data: {
            taskId: props.taskId
        }
    }).then((res) => {
        let list = res.data
        if (list.length === 0) {
            loadInitFlow()
        } else {
            processList.value = list
        }
    })
}

const chooseProcessEmployee = (item) => {
    if (props.disabled) {
        return
    }
    if (item.type == 3) {
        item['departmentCode'] = localStorage.getItem('departmentCode')
    }
    params.value = item
    showFlowHandlerGridCpt.value = true
}

const employeeSelect = (res) => {
    let list = processList.value
    for (let i = 0; i < list.length; i++) {
        if (list[i].id == res.processId) {
            list[i]['handler'] = res.data.username
            list[i]['handlerName'] = res.data.name
        }
    }
    processList.value = list
    showFlowHandlerGridCpt.value = false
}

// mounted
onMounted(() => {
    initData()
})
</script>
<style scoped>
.process-container {
    width: 100%;
    padding: 20px;
}

.process-content {
    display: flex;
    flex-wrap: wrap;
}

.process-content-item {
    margin-right: 20px;
}

.item-box {
    width: 120px;
    height: 80px;
    padding: 10px;
}

.box-class {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.item-box-default {
    background: #455a64;
    font-size: 14px;
    font-weight: lighter;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-box-select {
    background: #f1f1f1;
    font-size: 14px;
    font-weight: lighter;
    color: #657180;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-box-select:hover {
    cursor: pointer;
}

.item-box-selectd {
    background: #4875ae;
    font-size: 14px;
    font-weight: lighter;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-box-selectd {
    cursor: pointer;
}

.item-label {
    width: 120px;
    text-align: center;
    font-size: 14px;
    font-weight: lighter;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
